<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul>
			<li>
				<div><img src="./images/tou01.jpg" alt=""></div>
				<h1>哈哈哈哈</h1>
				<p>板块：新手报到 <span>发表时间：2022-09-26</span></p>
			</li>
		</ul>
    </section>
    <div class="post">
        <input id="title" class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select id="bk"><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
<script src="./js/jquery.3.6.3.js"></script>
<script>
	//点击我要发帖  显示.post元素
	$("header>span").click(function(){
		$(".post").show()
	})
	
	//输入内容 
	//点击发布  把输入的内容获取出来
	$(".btn").click(function(){
		//获取标题输入的值
		let titleVal = $("#title").val();
		//获取板块
		let bkVal = $("#bk").val();
		
		//创建元素
		let date = new Date();
		//产生随机数
		let rand = parseInt((Math.random()*4))+1;
		$(`<li>
			<div><img src="./images/tou0${rand}.jpg" alt=""></div>
			<h1>${titleVal}</h1>
			<p>板块：${bkVal} <span>发表时间：${date}</span></p>
		</li>`).prependTo($("ul"));
		//清空
		$("#title").val("");
		$("#bk").val("");
		//隐藏
		$(".post").hide();
		
	})
	//创建元素  追加ul里面
	
	
	
</script>
</body>
</html>